import React, { Component,PureComponent } from 'react'
import './index.css'

/**
 * 对于子组件来说，一旦父组件重新render，那么其也会跟着一起重新执行一次render方法
 * 即使子组件并没有使用到父组件传递的任何属性。或者当父组件空调用一次setState方法，
 * 那么此时state并没有真的改变，但是子组件还是要重新执行一次render，这其实是不太合理的。
 * 解决这个问题的方法有2个：
 * （1）手动写 componentShouldUpdate方法，对状态是否改变进行判断
 * （2）利用PureComponent组件，里面帮我们重写了shouldComponentUpdate方法
 */
export default class Parent extends PureComponent {

    state = {carName:'哈雷摩托',stus:['小明','小红']}

    changeCar = ()=>{
        //this.setState({carName:'特斯拉'})
        this.setState({})
    }

    addStus = ()=>{
        this.setState({stus:['小明',...this.state.stus]})
    }

    // shouldComponentUpdate(nextProps,nextState){
    //     return nextState.carName !== this.state.carName 
    // }

    render() {
        console.log('父组件的render方法调用了')
        const {carName,stus} = this.state;
        return (
            <div className="parent">
                <h3>父组件的车名为：
                    {carName}
                </h3>
                <h4>
                    {stus}
                    <button onClick={this.addStus}>点我加人</button>
                </h4>
                <button style={{marginBottom: '5px'}} onClick={this.changeCar}>点击换车</button>
                <Child carName={carName}></Child>
            </div>
        )
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps,nextState){
    //     return nextProps.carName !== this.props.carName 
    // }

    render() {
        console.log('子组件的render方法调用了')
        return (
            <div className="child">
                <h4>接收到父组件的车名为：
                    {this.props.carName}
                </h4>
            </div>
        )
    }
}